/*
 * @Author: scopesang
 * @Date: 2022-05-10 15:22:33
 * @LastEditors: scopesang
 * @LastEditTime: 2022-05-12 17:56:59
 * @FilePath: \hook-ts\src\App.tsx
 * @Description: App组件
 * 
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */
import React, { useState } from "react";


// 父传子
interface Iprops {
    num: number,
    setNum: (num: number) => void
}

// : React.FC  报错 要求 确认 传进来的值
// 補充：如果这个函数亲自传了一个接口作为泛型  props 可以不写了
// 其实不写React.FC也可以。React.FC表示：React.Function Component。
// React.FC 显式地定义了返回类型，其他方式是隐式推导的。
const Sub: React.FC<Iprops> = (props) => {
    return (
        <div>
            <h2 >数字为{props.num}</h2>
            <button onClick={() => props.setNum(1)}>设置为1</button>
        </div>
    )
}
// 事件用子传父的做法
const Child = () => {
    return (
        <div>1111</div>
    )
}
// 函数式组件没有this
const App: React.FC = () => {
    const [num, setNum] = useState(0);
    const addNumFn = () => {
        setNum(num + 1)
    }
    return (
        <>
            <Sub num={num} setNum={setNum} />
            {/* <Comp1 num={num}></Comp1> */}
            <Child />
            <button onClick={addNumFn}>addNumFn</button>

        </>
    )
}

export default App;